<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include :: header"></head>
<style>
.img-box p {
	color: #969696;
	padding: 0;
	font-size: 16px;
	font-weight: bold;
}

.img-box .img {
	width: 160px;
	height: 160px;
	border: 2px solid #ddd;
	margin-left: 10%;
	display: inline-block;
	position: relative;
}
/* 加号图标 */
.img-box .img .layui-icon-add-1 {
	position: absolute;
	font-size: 160px;
	color: #aaa;
}
/* 删除图标 */
.img-box .img .layui-icon-delete {
	position: absolute;
	font-size: 24px;
	top: 5px;
	right: 5px;
	color: #f20;
}

.img-box .img:hover {
	cursor: pointer;
	border-color: #eee;
}

.img-box .img img {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.img-box .img-text {
	display: inline-block;
	margin-left: 100px;
}

.img-box .img-text p {
	margin-bottom: 15px;
}

</style>
<body>
<form class="layui-form layui-form-pane" action="" id="saveForm">
		<div class="layui-form-item">
			<div class="border-box img-box">
				<p>轮播图:</p>
				<div class="img" id="scollUpload">
					<input type="hidden" name="imageName" id="scollImage" /> <i
						id="scollAdd" class="layui-icon layui-icon-add-1"></i> <img
						id="scollImg" src="" alt="">
				</div>
				<div class="img-text">
					<p>限上传一张轮播图</p>
					<p>图片尺寸最佳为180*180像素</p>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
    <label class="layui-form-label">内容地址</label>
    <div class="layui-input-block">
      <input type="text" name="url"  lay-verify="required|url|max:200"   autocomplete="off"  class="layui-input">
    </div>
  </div>
<div class="layui-form-item">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block">
      <select name="status"  lay-select-dict="status" lay-select-title="NONE" lay-select-code="1">

	 </select>
    </div>
  </div>
 <div class="layui-form-item">
    <label class="layui-form-label">排序号</label>
    <div class="layui-input-block">
     <input type="number" name="sortNo"  value="1"
							lay-verify="required|max:10"  autocomplete="off" class="layui-input">
    </div>
  </div>
 <div class="layui-form-item">
    <label class="layui-form-label layui-textarea-label" >备注</label>
    <div class="layui-input-block">
      <textarea name="remark" lay-verify="max:200"  class="layui-textarea"></textarea>
    </div>
  </div>
  
  <!-- 隐藏域 -->
   <div class="layui-form-item" style="display:none;">
    <button class="layui-btn"  lay-submit="" lay-filter="saveSubmit">提交</button>
  </div>
</form>
  <div th:include="include :: footer"></div>
	<script>
		layui.config({
			base :  cxt+'layuiadmin/' //静态资源所在路径
		}).extend({
			webplus : 'lib/webplus', //主入口模块
		}).use([ 'form','upload','webplus' ], function() {
			var $ = layui.$, 
			upload = layui.upload, 
			form = layui.form, 
			webplus = layui.webplus;
		  //创建一个上传组件
			var scollUpload = upload
					.render({
						elem : '#scollUpload',
						url : cxt + 'file/uploadImage',
						data : {
							token : webplus.getToken()
						},
						done : function(res, index, upload) { //上传后的回调
							if (res.appcode == '1') {
								var src = cxt
										+ "/file/showImage?fileName="
										+ res.imageFileName;
								$("#scollImage").val(
										res.imageFileName)
								$("#scollAdd").hide();
								$("#scollImg").attr("src", src)
							} else {
								webplus.alertError(res.appmsg);
							}
						},
						accept : 'images' //允许上传的文件类型

				})
				webplus.initSelect('saveForm');
			form.on('submit(saveSubmit)', function(data) {

				var smallImage = $("#scollImage").val();
				if (smallImage == '') {
					webplus.alertError("请上传轮播图");
					return false;
				}
				
				var paramData = data.field;

				
				webplus.doAjax('business/scollImage/save', paramData,
						'', '', '1')
				return false;
			});
		});

	</script>
	<link rel="stylesheet"    th:href="@{/css/common/openshow.css}" media="all"/>
</body>
</html>